<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-12 11:08:19
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab">
      <div class="stats-btn-group">
        <button 
          type="button" 
          :class="{'stats-checked': chartType == 'plan-a'}" 
          @click="chooseChart('plan-a')">
          {{$t('report.productFaultChart.malfunctionNum')}}
        </button>
        <button 
          type="button" 
          :class="{'stats-checked': chartType == 'plan-b'}" 
          @click="chooseChart('plan-b')">
          {{$t('report.productFaultChart.malfunctionRate')}}
        </button>
      </div>
      <el-button class="business-export-btn" type='primary' @click="handlerExportClick" :loading="exportLoading">
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <bar-chart :chart-data="barChartData" v-loading="loading" :is-loading="loading" v-show="isShowBar"></bar-chart>
    <pie-chart :chart-data="pieChartData" v-loading="loading" :is-loading="loading" v-show="isShowPie"></pie-chart>
  </div>
</template>
<script>
import BarChart from './BarChart.vue'
import PieChart from './PieChart.vue'
export default {
  name: 'product-fault-chart',
  components:{
    [BarChart.name]:BarChart,
    [PieChart.name]:PieChart
  },
  props:{
    exportLoading:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      chartType:'plan-a',
      barChartData:{},
      pieChartData:{},
      isShowBar:true,
      isShowPie:false,
    }
  },
  created() {
  },
  methods: {
    showChart(showType){
      if(showType === 'bar'){
        this.isShowBar = true
        this.isShowPie = false
      }
      if(showType === 'pie'){
        this.isShowBar = false
        this.isShowPie = true
      }
    },
    handlerExportClick(){
      this.$emit('export')
    },
    chooseChart(type){
      this.chartType = type
      this.$emit('change-type', type)
    },
    init(data, haveUsers){
      this.getChartData(data, haveUsers)
    },
    formatHours(hours) {
      let day = parseInt(Math.floor(hours / 24));
      let hour = hours - (day * 24)
      let time = '';
      if (day > 0) time += `${day }${this.$t('common.base.day')}`;
      if (hour > 0) time += `${hour.toFixed(1) } ${this.$t('common.base.hour1')}`;
      return time;

    },
    getTooltips(data, index, seriesIndex){
      if(this.chartType == 'plan-a'){
        return `
          <div class="tooltipTitle">${this.$t('report.mtbtSelect.driverType')}：${data[index].productFaultNumInfoDataVOS[seriesIndex].driverType || this.$t('common.base.noData')}</div>
          <div class="tooltipDetail">${this.$t('report.mtbtChart.failureStopNum')}：${data[index].productFaultNumInfoDataVOS[seriesIndex].faultNum}${this.$t('report.mtbtChart.time')}</div>
          <div class="tooltipDetail">${this.$t('report.mtbtChart.failureStopTime')}：${data[index].productFaultNumInfoDataVOS[seriesIndex].faultTime}${this.$t('common.base.hour1')}</div>
        `
      }
      return '';
      
    },
    getChartData(data, haveUsers) {
      if(!data)data = [];
      if(this.chartType == 'plan-a'){
        this.showChart('bar')
        let that = this
        let originData = data[0] ? data[0].productFaultNumInfoDataVOS : []
        let series = []
        if(haveUsers){
          series = (originData || []).map(item=>{
            return {type:'bar', name:item.driverType, 
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          })
        }else{
          let example = {type:'bar',
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: 'black',
                fontSize: 16
              }}
          }
          series = [example, example, example]
        }
        let dataSource = []
        data.forEach(item=>{
          let oneData = [item.date];
          series.forEach((element, index) => {
            oneData.push(item.productFaultNumInfoDataVOS[index] ? item.productFaultNumInfoDataVOS[index].faultNum : 0)
            // if(haveUsers || (!haveUsers && item.productFaultNumInfoDataVOS[index].catalogName)){
            // }
          });
          dataSource.push(oneData)
        })
        if(dataSource.length == 0){
          return this.barChartData = {}
        }
        this.barChartData = {
          legend: {
            show: haveUsers
          },
          tooltip: {
            triggerOn:'mousemove',
            enterable:true,
            formatter: params => {
              return that.getTooltips(data, params.dataIndex, params.seriesIndex)
            }
          },
          dataset: {
            source:dataSource
          },
          xAxis: { type: 'category' },
          yAxis: {},
          series,
          dataZoom: [
            (data.length * series.length) > 30 ? {
              type: 'slider',
              show: true,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:50,
              xAxisIndex: 0,
              bottom:'10px'
            } : {
              type: 'slider',
              show: false,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:100,
              xAxisIndex: 0,
              bottom:'10px'
            }]
        };
      }
      // 这里处理饼状图数据
      if(this.chartType == 'plan-b'){
        this.showChart('pie')
        let pieData = data.map(item=>{
          return {
            name : item.driverType,
            value : item.proportion
          }
        })
        this.pieChartData = {
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} <br/> {c}%'
          },
          series: [
            {
              type: 'pie',
              data: pieData
            }
          ]
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../business.scss';
.tooltipTitle{
  color:$color-primary-light-6;
  font-size:14px;
}
.tooltipDetail{
  color:orange;
  font-size:12px;
}
</style>
<style lang="scss">
.business-chart{
  .tooltipTitle{
    color:$color-primary-light-6;
    font-size:14px;
  }
  .tooltipDetail{
    color:orange;
    font-size:12px;
  } 
}
</style>